<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.bigbox{
			/* flex布局 */
				/* justify-content:重要  */
			/* 	决定主轴的方向:
				row:水平,从左往右
				row-reverse:水平,从右往左 、
				column:垂直，从上往下
				column:垂直，从上往下
				*/
				display: flex;
				flex-direction: row;
			/* 	是否换行 
			/* nowrap:不换行,默认值 */
			/* wrap:换行（常用） */
			/* wrap-reverse:反转换行 */
			    /* flex-wrap: wrap; */
				/* 复合写法: */
				flex-flow: row wrap;
				/* 决定主轴中子项目的排列方式
				flex-start:从主轴的开始位置，默认值
				flex-end:从主轴的结束位置
				center:居中的位置
				space-between:两端对齐
				space-around:环绕对齐，拉手对齐
				*/
				/* justify-content: center; */
				justify-content: space-between;
				 /* 交叉轴的对齐方式 */
				/* center:居中 */
				/* justify-content: flex-end; */
				/* justify-content:space-around;  /*  平分剩余空间 */ */
				/* justify-content:flex-start; */
				
		
				align-items:center;
				/* 多条轴线的对齐方式:
				center:居中
				space-between:两端对齐
				space-around:环绕对齐 */
				align-content: space-around;
				width: 800px;
				height: 700px;
				border: 1px solid black;
				margin: 100px auto;
		}
		.bigbox div{
				width: 200px;
				height: 300px;
				border: 1px solid red;
				font-size: 34px;
				text-align: center;
				line-height: 300px;
		}
			
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			<div class="box">4</div>
			<div class="box">5</div>
			<div class="box">6</div>
		</div>
	</body>
</html>
